<template>
  <div class="hv-cover-img">
    <a-upload list-type="picture" :showUploadList="false" :before-upload="beforeUpload">
      <div class="hv-cover-img-upload-operate">
        <a-button type="link" size="small">
          <hv-dynamic-icon :iconName="'UploadOutlined'" />
          {{ coverImg && coverImg.length > 0 ? '重新上传' : '上传图片' }}
        </a-button>
        <a-button type="link" size="small" v-if="resourceSelectVisible" @click.stop="openResource">
          <hv-dynamic-icon :iconName="'SelectOutlined'" /> 素材库选择
        </a-button>
      </div>
    </a-upload>
    <div class="hv-cover-img-preview">
      <div class="hv-cover-img-preview-img">
        <img :src="coverImg" v-hv-error-src="transparentImg" />
      </div>
      <div class="hv-cover-img-preview-content">
        <div class="hv-cover-img-preview-content-title">
          <div :title="coverImg">
            {{ coverImg && coverImg.length > 0 ? coverImg : '未上传图片！' }}
          </div>
        </div>
        <div>
          <a-button type="link" size="small" title="查看">
            <hv-dynamic-icon :iconName="'EyeOutlined'" />
          </a-button>
          <a-button type="link" size="small" title="复制" @click="copyImgPath">
            <hv-dynamic-icon :iconName="'CopyOutlined'" />
          </a-button>
          <a-popconfirm title="您确认要删除吗？" @confirm="deleteImg" overlayClassName="hv-dark-popover">
            <a-button type="link" size="small" title="删除">
              <hv-dynamic-icon :iconName="'DeleteOutlined'" />
            </a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import transparentImg from '@/visual/assets/img/dashboard/transparent.png';
  import useClipboard from 'vue-clipboard3';
  import { notification } from 'ant-design-vue';
  import CommonUtil from '@/visual/commons/utils/common-util';
  import FileUploadApi from '@/visual/apis/file-upload-api';
  import HttpResultUtil from '@/visual/commons/utils/http-result-util';
  import { businessMarkConst } from '@/visual/commons/consts/business-mark-const';
import { useVisualConfigStore } from '@/visual/stores/visual-config';
import { useDashboardStore } from '@/visual/stores/dashboard';
import { useRoute } from 'vue-router';

  export default defineComponent({
    name: 'UploadImg',
    props: {
      imgUrl: {
        type: String,
        default: '',
      },
      resourceSelectVisible: {
        type: Boolean,
        default: true,
      },
    },
    emits: ['update:imgUrl'],
    setup(props, { emit }) {
      const route = useRoute();
      const { toClipboard } = useClipboard();
      const useVisualConfig = useVisualConfigStore();
      const useDashboard = useDashboardStore();

      const coverImg = ref<string>();

      watch(
        () => props.imgUrl,
        () => {
          coverImg.value = props.imgUrl;
        },
        { immediate: true }
      );

      const beforeUpload = (file: any) => {
        const businessId =
          route && route.query && route.query.id ? route.query.id : useDashboard.getDashboardTempId;
        const formData = new FormData();
        formData.append('imgUpload', file);
        formData.append('businessId', businessId);
        formData.append('businessMark', businessMarkConst.dashboard);
        formData.append('createUserId', useVisualConfig.getUserInfo.userId);
        formData.append('createUser', useVisualConfig.getUserInfo.userName);

        FileUploadApi.uploadImg(formData).then((res) => {
          if (HttpResultUtil.isSuccess(res)) {
            coverImg.value = FileUploadApi.previewImg(res.data.responseData);
            emit('update:imgUrl', coverImg.value);
          } else {
            HttpResultUtil.failureTipMsg(res);
          }
        });
        return false;
      };

      const openResource = () => {};

      const deleteImg = () => {
        coverImg.value = '';
        emit('update:imgUrl', coverImg.value);
      };

      const copyImgPath = async () => {
        if (coverImg.value && coverImg.value.length > 0) {
          try {
            await toClipboard(coverImg.value);
            notification.success({
              message: '提示',
              description: '复制成功！',
            });
          } catch (e) {
            notification.warning({
              message: '提示',
              description: '复制失败！',
            });
          }
        } else {
          notification.warning({
            message: '提示',
            description: '未上传图片！',
          });
        }
      };

      return {
        coverImg,
        transparentImg,
        beforeUpload,
        openResource,
        copyImgPath,
        deleteImg,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import './UploadImg.less';
</style>
